<template>
  <div class="info-item card-item">
    <div class="title-info">
      <i class="iconfont icon-shicai" style="color: #84CC16;"></i>
      <span class="sub-title">食材信息</span>
    </div>

    <div class="info material-info">
      <div class="material-item">
        <span class="material-title">主料</span>
        <div v-if="getFoodMaterial('主料').length > 0" class="material-content">
          <el-tag v-for="(item, index) in getFoodMaterial('主料')"
                  :key="index">{{ `${item.name} ${item.amount}` }}
          </el-tag>
        </div>
        <div v-else class="material-content">
          <el-tag>无</el-tag>
        </div>
      </div>

      <div class="material-item">
        <span class="material-title">配料</span>
        <div v-if="getFoodMaterial('辅料').length > 0" class="material-content">
          <el-tag v-for="(item, index) in getFoodMaterial('辅料')"
                  :key="index">{{ `${item.name} ${item.amount}` }}
          </el-tag>
        </div>
        <div v-else class="material-content">
          <el-tag>无</el-tag>
        </div>
      </div>

      <div class="material-item">
        <span class="material-title">辅料</span>
        <div v-if="getFoodMaterial('调料').length > 0" class="material-content">
          <el-tag v-for="(item, index) in getFoodMaterial('调料')"
                  :key="index">{{ `${item.name} ${item.amount}` }}
          </el-tag>
        </div>
        <div v-else class="material-content">
          <el-tag>无</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useFoodStore } from '@/store/food.ts'

const foodStore = useFoodStore()

const getFoodMaterial = (type: string) => {
  return foodStore.currentRecipe.materialList.filter((item) => {
    return item.type === type
  })
}
</script>
